<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../org/angular.min.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="ctrl">
        <span ng-bind="name" ng-click="fun()">触发函数</span>
        <div>
            <div>
                商品名称： {{goods.name}}
            </div>
            <div>
                价格: {{goods.price}}
            </div>
            <div>
                数量：{{goods.num}}
            </div>
            <div>
                <button ng-click="add()">增加</button>
                <button ng-click="reduce()">减少</button>
            </div>
            <div>
                总价：{{goods.price*goods.num}}
            </div>
        </div>
    </div>

    <script>
        var m = angular.module('app', []);
        m.controller('ctrl', ['$scope', function($scope) {
            //在scope中可以定义数据
            $scope.goods = {
                name: 'macbook',
                price: 2000,
                num: 1
            };
            //也可以定义方法
            $scope.add = function() {
                $scope.goods.num = Math.min(++$scope.goods.num, 6);
            }
            $scope.reduce = function() {
                $scope.goods.num = Math.max(--$scope.goods.num, 0);
            }
        }])
        //点击增加按钮不会执行他，只会去scope中找add方法
        function add() {
            alert('增加')
        }
    </script>
</body>

</html>
